/**
 * 酒秀
 * 9elephas.com
 */
import React, { Component } from 'react';
import { COLOR, STATUS_BAR_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT, FIND_VIEW_WIDTH } from '../config'
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    FlatList,
    ScrollView,
    Image,
    TouchableOpacity,
    InteractionManager
} from 'react-native';
var dataLike = [{ "name1": "1" }, { "name1": "2" }, { "name1": "12" }, { "name1": "13" }, { "name1": "14" }, { "name1": "15" }, { "name1": "16" }, { "name1": "17" },
{ "name1": "18" }, { "name1": "19" }, { "name1": "122" }, { "name1": "133" }, { "name1": "133" },]
var data = [
    {
        "name": "LVB",
        "image": "http://vimg2.ws.126.net/image/snapshot/2017/6/S/H/VCL2UP9SH.jpg",
        "lveo": "33",
    },
    {
        "name": "LVB",
        "image": "http://vimg2.ws.126.net/image/snapshot/2017/6/S/H/VCL2UP9SH.jpg",
        "lveo": "33",
    },
    {
        "name": "LVB",
        "image": "http://vimg2.ws.126.net/image/snapshot/2017/6/S/H/VCL2UP9SH.jpg",
        "lveo": "33",
    },
    {
        "name": "LVB",
        "image": "http://vimg2.ws.126.net/image/snapshot/2017/6/S/H/VCL2UP9SH.jpg",
        "lveo": "33",
    },
    {
        "name": "LVB",
        "image": "http://vimg2.ws.126.net/image/snapshot/2017/6/S/H/VCL2UP9SH.jpg",
        "lveo": "33",
    },
]

export default class Find extends Component {
    static navigationOptions = {
        title: '发现'
    };

    constructor(props) {
        super(props)

    }
    selectLike(item){
        // console.log(JSON.stringify(item))
        let {navigation} = this.props;
        InteractionManager.runAfterInteractions(() => {
            navigation.navigate('FindSelectLike',{selectItem:item.index})
        });
    }

    //行间距
    _separatorCity = () => {
        return <View style={{ width: 20, backgroundColor: 'white' }} />;
    }

    //每一行的数据
    inRrenderItemCity = (item, index) => {
        {
            console.log(item.item.image)
        }
        return (
            <View style={styles.itemStyle}>
                <Image source={{ uri: item.item.image }} style={{
                    height: 50, width: 50, alignSelf: 'center'
                    , backgroundColor: 'gray', marginTop: 20
                }} />
                <Text style={{ alignSelf: 'center', paddingTop: 10 }}>{item.item.name}</Text>
                <Text style={{ alignSelf: 'center', paddingTop: 10 }} >{item.item.lveo}</Text>
                <View style={{
                    marginLeft: 30, marginRight: 30, height: 30, backgroundColor: 'red'
                    , marginTop: 20
                }}>
                </View>

            </View>
        )
    }
    inRrenderItemLike = (item, index) => {
        {
            console.log(item.item)
        }
        return (
            <TouchableOpacity onPress = {() => this.selectLike(item)}>
                <View key={0} style={styles.itemStyleLike}>


                </View>
            </TouchableOpacity>
        )
    }


    /**
     * 
     * 设置flatlistkey
     * 
     * @memberOf Find
     */
    keyExtractorCity = (item, index) => item.key;
    // keyExtractorLike = (item, index) => item.key;
    keyExtractorLike(item, index) {
        return "index" + index + item;
    }
    render() {
        return (
            <ScrollView style={styles.container}>
                <Text>同城推荐</Text>
                <FlatList
                    ref='flatlist'
                    renderItem={this.inRrenderItemCity}
                    keyExtractor={this.keyExtractorCity}
                    data={data}
                    horizontal={true}
                    ItemSeparatorComponent={this._separatorCity}
                >
                </FlatList>
                <Text>猜你喜欢</Text>
                <FlatList
                    ref='flatlistLike'
                    renderItem={this.inRrenderItemLike}
                    keyExtractor={this.keyExtractorLike}
                    data={dataLike}
                    numColumns={3}
                >
                </FlatList>

            </ScrollView>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        width: SCREEN_WIDTH,
        backgroundColor: 'white'
    },
    itemStyle: {
        width: SCREEN_WIDTH / 2 - 60,
        height: 200,
        padding: 5,
        borderWidth: 1,
        borderColor: 'black',
        flex: 1,
        alignSelf: 'center',
        flexDirection: 'column',
    },
    itemStyleLike: {
        width: SCREEN_WIDTH / 3,
        height: SCREEN_WIDTH / 3,
        backgroundColor: 'blue',
        borderWidth: 1,
        borderColor: 'black',
    }
})



